<template>
  <div class="extend">
    <div class="extend-left">
      <div class="extend-li" :class="activeName === 'permission' ? 'extend-li-active' : ''" @click.stop="changeTab('permission')">权限设置</div>
      <div class="extend-li" :class="activeName === 'message' ? 'extend-li-active' : ''" @click.stop="changeTab('message')">消息管理</div>
      <div class="extend-li" :class="activeName === 'satisfaction' ? 'extend-li-active' : ''" @click.stop="changeTab('satisfaction')">满意度配置</div>
      <div class="extend-li" :class="activeName === 'serviceRecord' ? 'extend-li-active' : ''" @click.stop="changeTab('serviceRecord')">服务记录</div>
      <div class="extend-li" :class="activeName === 'trigger' ? 'extend-li-active' : ''" @click.stop="changeTab('trigger')">触发器</div>
      <div class="extend-li" :class="activeName === 'SLAConfig' ? 'extend-li-active' : ''" @click.stop="changeTab('SLAConfig')">SLA</div>
      <div class="extend-li" :class="activeName === 'filterSetting' ? 'extend-li-active' : ''" @click.stop="changeTab('filterSetting')">过滤器设置</div>
    </div>
    <div class="extend-right">
      <component :is='activeName' :ref='activeName' :smsTemplList="smsTemplList" :smsSignList="smsSignList"></component>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import permission from './components/permission.vue'
import message from './components/message.vue'
import satisfaction from './components/satisfaction.vue'
import serviceRecord from './components/serviceRecord.vue'
import trigger from './components/trigger.vue'
import SLAConfig from './components/SLAConfig.vue'
import filterSetting from './components/filterSetting.vue'
import { commonAction, uuid } from '@/utils/common';
import { checkPermission } from '@/utils/directive'
@Component({
  name: 'extendComp',
  components: {
    trigger,
    satisfaction,
    serviceRecord,
    message,
    permission,
    SLAConfig,
    filterSetting
  }
})
export default class extends Vue {
  [x: string]: any;
  private smsSignList = []
  private smsTemplList = []
  private activeName = 'permission'
  private changeTab (type: string) {
    this.activeName = type
  }

  private get isPermiss () {
    return checkPermission(null, { value: ['sms'] }, 'limits')
  }

  private beforeMount () {
    if (this.isPermiss) {
      this.getSmsDate()
    }
  }

  private getSmsDate () {
    const accountId = this.$store.state.common.session.account._id
    const data = {
      requestId: uuid(),
      action: 'MANAGER_TEMPLATE_QUERY',
      param: { needContent: true, status: 2, customer: accountId }
    }
    commonAction({ url: '/sms-api/sms/manager/template/query-init', method: 'post', data }).then(res => {
      if (res.code === '0000200') {
        this.smsTemplList = res.data || []
      }
    })
    const params = {
      requestId: uuid(),
      action: 'MANAGER_SIGN_QUERY',
      param: { needContent: true, status: 2, customer: accountId }
    }
    commonAction({ url: '/sms-api/sms/manager/sign/query-init', method: 'post', data: params }).then(res => {
      if (res.code === '0000200') {
        this.smsSignList = res.data || []
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
.extend {
  display: flex;
  height: calc(100% - 56px);
  .extend-left {
    color: #767E91;
    width: 150px;
    box-shadow: 1px 0px 4px 0px #e0e6f0;
    height: 100%;
    font-weight: 400;
    padding: 12px;
    .extend-li {
      cursor pointer
      color: #1a1e3a;
      text-align: left;
      height: 45px;
      line-height: 45px;
      min-width: 100%;
      padding-left: 16px;
    }
    .extend-li-active {
      font-weight: 600;
      color: #008BEE;
    }
  }
  .extend-right {
    padding: 24px
    flex: 1
  }
}
</style>
